<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<el-row :gutter="25">
					<el-col :span="4">
						<el-form-item label="承租户：" prop="status">
							<el-input v-model="listQuery.AName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="合同编号：" prop="status">
							<el-input v-model="listQuery.AName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="起诉节点：" prop="status">
							<el-input v-model="listQuery.AName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="发生日期：" prop="status">
							<el-input v-model="listQuery.AName"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<div>
							<el-button size="mini" type="primary">查询</el-button>
							<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<!-- <el-button type="primary" size="mini" @click="chengzhurendaoru('导入')">承租人导入</el-button> -->
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="承租人" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="合同编号" prop="userId">
				</el-table-column>


				<el-table-column align="center" label="累计欠租时长" prop="userName">
				</el-table-column>

				<el-table-column align="center" label="累计欠租金额" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="诉讼节点" prop="userId">
				</el-table-column>
				<el-table-column align="center" label="发生日期" prop="phone">
				</el-table-column>

				<el-table-column align="center" label="备注" prop="phone">
				</el-table-column>


				<el-table-column align="center" label="操作" width="240">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="jiedianluru(scope.row)">节点导入</el-button>
						<el-button type="text" size="mini" @click="cuishouxiangqing">详情</el-button>
						<el-button type="text" size="mini" @click="handleDel">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.page" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>


<!-- 承租人导入 -->
		<el-dialog title="承租人导入" :visible.sync="chengzhurendaoruVisible" width="50%" :before-close="handleClose"
			style="margin-top: 20px;">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-form-item label="承租人：" prop="status">
					<el-select v-model="listQuery.status">
						<el-option label="发布" value="1" key="1"></el-option>
						<el-option label="不发布" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号码：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="合同编号：" prop="status">
					<el-select v-model="listQuery.status">
						<el-option label="发布" value="1" key="1"></el-option>
						<el-option label="不发布" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		
		
			<div class="saveContent">
				<el-button type="primary" @click="chengzhurendaoruVisible = false" size="medium">发送</el-button>
			</div>
		
		</el-dialog>
		
		<!-- 扫描件上传组件 -->
		<FileUpload :visible.sync="uploadDialogVisible" title="扫描件上传" width="900px" file-type-text="扫描件"
			:file-list-title="'扫描件列表'" :show-template="false" :show-preview="true" confirm-text="确定" :max-size="10"
			accept=".pdf,.jpg,.jpeg,.png,.gif,.doc,.docx" tip-text="只能上传pdf/jpg/png/gif/doc/docx文件，且不超过10MB"
			@confirm="handleUploadConfirm" @preview="handleFilePreview" @close="handleUploadClose" />
			
			
		<!-- 节点录入 -->
		<el-dialog title="节点录入" :visible.sync="jiedianluruVisible" width="50%" :before-close="handleClose"
			style="margin-top: 20px;">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-form-item label="承租人：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="合同编号：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="累计欠租时长：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="累计欠租金额：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="诉讼节点：" prop="status">
					<el-select v-model="listQuery.status">
						<el-option label="发布" value="1" key="1"></el-option>
						<el-option label="不发布" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发生日期：" prop="status">
					<el-date-picker v-model="listQuery.time" type="date" placeholder="年/月/日">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="备注：" prop="status">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				<el-form-item label="诉讼文件：" prop="floorcount">
					<div style="display: flex;">
						<div style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">文件链接</div>
						<div style="line-height: 40px;color: blueviolet;margin-left: 10px;" @click="handleUploadScan">文件上传</div>
					</div>
				</el-form-item>
			</el-form>
		
		
			<div class="saveContent">
				<el-button type="primary" @click="jiedianluruVisible = false" size="medium">发送</el-button>
			</div>
		
		</el-dialog>
		
		<!-- 详情 -->
		<el-dialog title="转租登记" :visible.sync="xiangqingVisible" width="50%" :before-close="handleClose"
			style="margin-top: 0px;">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;">被诉承租人信息</div>
				<el-form-item label="承租人：" prop="buyer">
					<el-input v-model="shenheQuery.buyer"></el-input>
				</el-form-item>
				<el-form-item label="合同编号：" prop="buyer">
					<el-input v-model="shenheQuery.buyer"></el-input>
				</el-form-item>
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;">诉讼业务阶段</div>
				<el-form-item label="诉讼节点：" prop="buyer">
					<el-input v-model="shenheQuery.buyer"></el-input>
				</el-form-item>
				<el-form-item label="发生日期：" prop="buyer">
					<el-input v-model="shenheQuery.buyer"></el-input>
				</el-form-item>
				<el-form-item label="备注：" prop="buyer">
					<el-input v-model="shenheQuery.buyer"></el-input>
				</el-form-item>
			</el-form>
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom: 20px;">附件列表</div>
				<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
					<el-table-column align="center" label="附件名称" prop="userId">
					</el-table-column>
				
					<el-table-column align="center" label="操作" width="240">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="handleUploadScan(scope.row)">查看附件</el-button>
						</template>
					</el-table-column>
				
				</el-table>
		
			<div class="saveContent">
				<el-button v-if="type==3" type="primary" @click="xiangqingVisible = false" size="medium">返回</el-button>
				<el-button v-else type="primary" @click="xiangqingVisible = false" size="medium">保 存</el-button>
			</div>
		
		</el-dialog>
	</div>
</template>

<script>
	import FileUpload from '@/components/FileUpload.vue';
	export default {
		name: "managementjinghuguanli",
		components: {
			FileUpload
		},
		data() {
			return {
				listQuery: {
					page: 1,
					limit: 20,
					keyword: "",
					mobile: "",
					status: "1",
					time: ""
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [{
					userId: 0,
					userName: "吴晓华",
					userStatus: "0",
					phone: "13807300130",
					remarks: "此角色为测试角色",
					roleId: "1",
					deptId: "1",
				}, ],
				listLoading: false,
				dialogVisible: false,
				formData: {
					userId: "",
					userName: "",
					phone: "",
					deptId: "",
					roleId: "",
					userStatus: "1",
					remarks: "",
				},
				shenheQuery: {},
				type: '',
				dialogName:'',
				jiedianluruVisible:false,
				yinhangxinxi:false,
				chengzhurendaoruVisible:false,
				uploadDialogVisible:false,
				xiangqingVisible:false
			};
		},

		computed: {
			deptName() {
				return (val) => {
					if (val == "1") {
						return "事业部";
					}
					return "生活部";
				};
			},
		},

		mounted() {
			this.total = this.list.length;
		},

		methods: {
			shenheButton(type) {
				this.shenheName = type
			},
			handleSizeChange(val) {
				this.listQuery.page = 1;
				this.listQuery.limit = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.page = val;
				this.getList();
			},
			getList() {
				this.listLoading = true;
				newsPage(this.listQuery).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
					this.listLoading = false;
				});
			},

			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},

			jiedianluru(){
				this.jiedianluruVisible = true
			},
			chengzhurendaoru(){
				this.chengzhurendaoruVisible = true
			},
			cuishouxiangqing(){
				this.xiangqingVisible = true
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.formData = {
						...currentData
					};
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 扫描件上传
			handleUploadScan() {
				console.log(1)
				this.uploadDialogVisible = true;
			},
			// 上传确认
			handleUploadConfirm(fileList) {
				if (fileList.length === 0) {
					this.$message.warning('请先选择要上传的文件');
					return;
				}
			
				// 这里可以实现实际的文件上传逻辑
				this.$message.success(`成功上传 ${fileList.length} 个扫描件`);
				this.uploadDialogVisible = false;
			},
			// 文件预览
			handleFilePreview(file) {
				this.$message.info(`预览文件: ${file.name}`);
				// 这里可以实现文件预览逻辑
			},
			// 上传弹窗关闭
			handleUploadClose() {
				this.currentUploadContract = {};
			},
			// 提交
			handleDel() {
				this.$confirm('此操作将删除这条数据，请确认是否继续操作？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
	};
</script>
<style scoped>
	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.xinxi {
		display: flex;
		width: 800px;
	}

	.goufangContent {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		background-color: #F7F7F7;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	/deep/.el-input__inner {
		height: 30px !important;
		line-height: 30px !important;
	}

	/deep/.el-form-item__label {
		height: 30px !important;
	}

	/dee/.el-date-editor {
		width: 120px !important;
	}
</style>